<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <!-- 

        移动端
            设计图   设计图一般比实际设备放大了两倍或者3倍    
            相对单位   vw / vh / vmax / em / rem
                1vw = 1%视口宽度    
                em   相对于父元素字体大小而言的
                rem  相对于根元素html的字体大小而言的
            
            移动端适配的实现：动态设置根元素html的字体大小(浏览器的可视宽度 / 设计图的宽度)，其他元素使用rem做单位

        作业
            1 出现了省略号，字还多出来的情况？？？？？？？？
            2 手机端没问题，但是PC端挂了？？？   了解为什么挂
            3 怪异盒模型的使用
            4 不能出现整个页面横向滚动
            5 移动端页面只写页面效果，不写动态效果
            6 边框使用px   不要使用rem
     -->
    
</body>
</html>